<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <template>
        <div v-loading="loading">
          <a-form-model
            ref="coordinateForm"
            :rules="rules"
            :model="form"
            :labelCol="{ span: 6 }"
            :wrapperCol="{ span: 16 }"
          >
          <template v-if="form.id > 0">
            <a-form-model-item label="图库ID" >
              {{ form.group_id }}
            </a-form-model-item>
            <a-form-model-item label="图库描述" >
              {{ form.group_name }}
            </a-form-model-item>
            <a-form-model-item label="图库容量" >
              {{ form.max_capacity}}
            </a-form-model-item>
            <a-form-model-item label="当前图库数量"  >
              {{ form.image_num}}张
              <a-button
                :loading="btnLoading"
                type="primary"
                @click="refreshImageGroupStart"
                v-if="status == 1"
              >
                刷新图库数量
              </a-button>
            </a-form-model-item>
            <a-form-model-item label="异常图片数量"  help="出现异常图片，请重新编辑商品相册图片后点击更新图库。">
              {{ err_num }}张
              <a-button
                :loading="btnLoading"
                type="primary"
                @click="checkErr"
                v-if="status == 1"
              >
                查看
              </a-button>
            </a-form-model-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 6 }" help="每次更新最多1000个商品主图" v-if="status == 1">
              <a-button
                :loading="btnLoading"
                type="primary"
                @click="uploadImageStart"
              >
                更新图库
              </a-button>
            </a-form-item>

          </template>
          <template v-else>
            <a-form-model-item label="图库ID" prop="group_id" help="仅支持数字字母与下划线">
              <a-input v-model="form.group_id" />
            </a-form-model-item>
            <a-form-model-item label="图库描述" prop="group_name">
              <a-input v-model="form.group_name" />
            </a-form-model-item>
            <a-form-model-item label="图库容量" prop="max_capacity" help="设置后不能修改，请根据实际情况进行设置">
              <a-input v-model="form.max_capacity" suffix="张" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
              <a-button
                :loading="btnLoading"
                type="primary"
                @click="submitForm"
              >
                保存
              </a-button>
            </a-form-model-item>
          </template>
          </a-form-model>
        </div>
      </template>

      <!-- 查看异常图片 -->
      <a-modal title="异常图片" zIndex="9999" style="width: 300px" v-model="visible" :destroyOnClose="true" :footer="null">
      <s-table ref="table" rowKey="id" :columns="manager" :data="loadData">
          <span slot="goods_id" slot-scope="text, record">
            <span :length="20" tooltip>{{ record.goods_id }}</span>
          </span>
          <span slot="pic_url" slot-scope="text, record">
            <img style="width: 40px; heigth: 40px; border-radius: 3px; margin-right: 5px" :src="record.pic_url" />
          </span>
          <span slot="name" slot-scope="text, record">
            <span :length="20" tooltip>{{ record.name }}</span>
          </span>
        </s-table>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

  <script>
import storage from "store";
import { STable } from '@/components'
import { getStoreSetting, saveStoreSetting, uploadImage, refreshImageGroup, getErrImage } from "@/api/imageSearch";
const manager = [
  {
    title: '商品ID',
    dataIndex: 'goods_id',
  },
  {
    title: '异常图片',
    scopedSlots: { customRender: 'pic_url' },
  },
  {
    title: '商品名称',
    scopedSlots: { customRender: 'name' },
  },
]
export default {
  name: "ImageSearchGoods",
  components: {
    STable,
  },
  data() {
    return {
      form: {
        id: 0,
        group_id:'',
        group_name:'',
        max_capacity:''
      },
      status:0,
      err_num:0,
      visible:false,
      manager,
      loadData: () =>{
        return getErrImage({}).then((res) => {
          if(res.code == 0) {
            return res.data;
          } else {
            return [];
          }
        })

      },
      rules:{
        group_id: [{ required: true, message: '请设置图库ID' }],
        group_name: [{ required: true, message: '请设置图库描述' }],
        max_capacity: [{ required: true, message: '请设置图库容量' }]
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {

    getData: function () {
      this.store_id = storage.get("storeId");
      this.loading = true;
      getStoreSetting({ store_id: this.store_id })
        .then((res) => {
          if (res.code == 0) {
            this.$nextTick(() => {
              if (res.data.model) {
                this.form = res.data.model
              }
              this.status = res.data.status
              this.loading = false;
              this.err_num = res.data.err_num
            })
          } else {
            this.loading = false;
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .then(() => {
          this.loading = false;
        });
    },
    submitForm: function () {
      console.log('this.form', this.form);
      this.store_id = storage.get("storeId");

      this.btnLoading = true;
      saveStoreSetting(this.form)
        .then((res) => {
          if (res.code == 0) {
            // 这里需要刷新页面的
            this.$message.success("创建成功！");
          } else {
            this.$message.warning(res.msg ? res.msg : "创建失败！");
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .then(() => {
          this.btnLoading = false;
        });

    },
    uploadImageStart: function(){
      uploadImage().then((res) => {
        this.$message.success("已创建更新图库任务，每次更新最多1000个商品");
      })
      .catch((error) => {
        console.log(error);
      })
      .then(() => {
        this.btnLoading = false;
      });
    },
    refreshImageGroupStart:function(){
      refreshImageGroup().then((res) => {
        if(res.code == 0){
          this.$message.success("图库图片数量已刷新成功");
          this.form.image_num = res.data.pic_count
        }

      })
    },
    checkErr: function(){
      this.visible = true;
    }
  },
};
</script>

  <style scoped></style>
